<template>
  <view class="trade-depth-container bg-theme">
    <view v-if="showDepth" style="height: 230px">
      <trade-depth-chart :list="list"></trade-depth-chart>
    </view>
    <view class="trade-depth-content">
      <view class="depth-head">
        <view class="depth-head-item">
          <view class="depth-head-item-left">
            {{ $t("tradeDepth.labels[0]") }}
          </view>
          <view class="depth-head-item-right">
            {{ $t("tradeDepth.labels[1]") }}
          </view>
        </view>
        <view class="depth-head-item">
          <view class="depth-head-item-left">
            {{ $t("tradeDepth.labels[2]") }}
          </view>
          <view class="depth-head-item-right">
            {{ $t("tradeDepth.labels[3]") }}
          </view>
        </view>
      </view>
      <view class="depth-main-item">
        <view class="depth-cell">
          <view
            class="depth-cell-item"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="depth-cell-left">
              <view
                class="depth-cell-bg"
                :style="{ width: getWidth(item[0].amount, item[0].sum) + '%' }"
              ></view>
              <view class="depth-num">{{
                $utils.fixed(item[0].amount, 6)
              }}</view>
              <view class="depth-price">{{
                $utils.priceToFixed(item[0].price)
              }}</view>
            </view>
            <view class="depth-cell-right">
              <view
                class="depth-cell-bg"
                :style="{ width: getWidth(item[1].amount, item[1].sum) + '%' }"
              >
              </view>
              <view class="depth-price">{{
                $utils.priceToFixed(item[1].price)
              }}</view>
              <view class="depth-num">{{
                $utils.fixed(item[1].amount, 6)
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TradeDepthChart from "@/components/TradeDepthChart/TradeDepthChart";

export default {
  components: { TradeDepthChart },
  name: "TradeDepth",
  props: {
    showDepth: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    inSum: { type: Number | String, default: 1 },
    outSum: { type: Number | String, default: 1 },
  },
  data() {
    return {
      tabList: [],
    };
  },
  methods: {
    getWidth(amount, sum) {
      // return parseInt(Math.random() * 100);
      if (typeof amount == "string") {
        amount = Number(amount);
      }
      if (typeof sum == "stirng") {
        sum = Number(sum);
      }
      let result = ((amount / sum) * 100).toFixed(0);
      return result;
    },
  },
};
</script>

<style lang="less" scoped>
.trade-depth-container {
  background-color: @white;
  .trade-depth-content {
    padding: 0 30rpx;
  }
  .depth-head {
    color: var(--text-color-3);
    display: flex;
    font-size: 24rpx;
    height: 48rpx;
    line-height: 48rpx;
    position: sticky;
    top: calc(var(--status-bar-height) + 44px);
    background-color: var(--page-part-color);
    z-index: 101;
    .depth-head-item {
      flex: 1;
      display: flex;
      justify-content: space-between;
      margin-right: 20rpx;
      &:last-child {
        margin-right: 0;
      }
      .depth-head-item-left {
      }
      .depth-head-item-right {
      }
    }
  }
  .depth-main-item {
    .depth-cell {
      font-size: 24rpx;
      font-family: "DIN-Medium";
      position: relative;
      .depth-cell-item {
        display: flex;
        height: 68rpx;
        line-height: 68rpx;
        .depth-cell-left {
          flex: 1;
          margin-right: 20rpx;
          position: relative;
          width: 50%;
          display: flex;
          justify-content: space-between;
          .depth-cell-bg {
            position: absolute;
            left: 0;
            height: 100%;
            background-color: var(--up-color);
            opacity: 0.2;
            z-index: 0;
          }
          .depth-num {
          }
          .depth-price {
            color: var(--up-color);
          }
        }
        .depth-cell-right {
          flex: 1;
          position: relative;
          display: flex;
          justify-content: space-between;
          .depth-cell-bg {
            position: absolute;
            right: 0;
            height: 100%;
            background-color: var(--down-color);
            opacity: 0.2;
            z-index: 0;
          }
          .depth-price {
            color: var(--down-color);
            z-index: 100;
          }
          .depth-num {
            z-index: 100;
          }
        }
      }
    }
  }
}
</style>
